<template>
  <div class="sycartcory">
    <van-list
      v-model="loading"
      :finished="isEnd"
      finished-text="没有更多了"
      @load="getData"
    >
      <van-cell
        v-for="shoplist in list"
        :key="`shoplist-${shoplist.id}`"
      >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <sycateitmes
            :id="shoplist.id"
            :title="shoplist.title"
            :price="shoplist.price"
            :saleNum="shoplist.saleNum"
            :image="shoplist.image"
            :qunTitle="shoplist.qunTitle"
            :type="shoplist.type"
          ></sycateitmes>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import sycateitmes from './sycateitmes.vue'

export default {
  data () {
    return {
      id: '',
      list: [],
      // 请求更多数据的初始索引
      start: 0,
      // 是否还有更多商品数据
      isEnd: false,
      // 截流的开关，是否重复加载，如果正在加载不允许重复请求
      loading: false
    }
  },
  components: {
    sycateitmes
  },
  created () {
    this.id = this.$route.params.id
    this.getData()
  },
  beforeRouteUpdate (to, from, next) {
    this.id = to.params.id
    next()
    // 如果切换到其他分类就清空刚才拼接的数据，重新渲染其他商品的数据，以免上个分类的数据还残留在
    this.start = 0
    this.list = []
    this.getData()
  },
  methods: {
    getData () {
      this.$http.getCatecory(this.id, this.start).then(resp => {
        // 把显示更多的商品数组拼接到原来的list数组上，再变成新的数组
        this.list = this.list.concat(resp.items.list)
        this.start = resp.items.nextIndex
        this.isEnd = resp.items.isEnd
        this.loading = false
      })
    }
    // loadmore () {
    //   this.getData()
    // }
  }
}
</script>

<style lang="scss" scoped>
.sycartcory{
  .van-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #7f8c8d;
  }
  .van-cell{
    width: 49%;
    box-sizing: border-box;
    padding: 5px;
    // border: 1px solid #95a5a6;
    border-radius: 5px;
    .van-cell_title{
      width: 100%;
    }
  }
}
</style>
